<!--班车站点页-->
<template>
    <div class="wrap">
        <m-page-list
                :page="page"
                :total="page.total"
                :option="option"
                :table-data="tableData"
                :table-loading="tableLoading"
        >

            <template #hLSlot >
                <div class="tips">
                    注意：<br>
                    1.班车途经站点不同时，建议分开不同的班车，最好不要在班车站点(讫地)表录入多个班车站点(讫地)。<br>
                    2.如果在【班车站点(讫地)表】录入多个班车站点(讫地)时，需要确保多个班车站点(讫地)的去程班车站点一致、回程班车站点一致、各套票票价一致，否则可能售出班车不到达的站点。<br>
                    3.在【班车站点】功能中站点类型为”站点(讫地)”时，不会出现在购票的上车站点和下车站点选项中，它主要用途是标识该站点(讫地)构成班车行驶路线中其中的一个途经节点的作用。
                </div>
            </template>
        </m-page-list>
        <m-dialog-form ref="dialogRef" :data="dialogData" v-model:show="dialogShow" :option="dialogOption" @confirm="dialogConfirm" ></m-dialog-form>
    </div>

</template>

<script setup>

  import {defineProps,watch} from 'vue'
  //组件
  import MPageList from '@/components/PageList'
  import MDialogForm from '@/components/DialogForm/DialogForm'
  //请求
  import {
    addShuttleSchool,
    delShuttleSchool,
    delShuttleSchoolBySid,
    publicAllData,
    getAllShuttleSchool,
    editShuttleSchool
  } from '@/request/api/basicData'

  import {usePageList} from "./relPage";
  //引用类型字段参数
  import {refOpt} from "../const";
  import {ElMessage, ElMessageBox} from "element-plus";

  const props = defineProps(['shuttleData']);

  let shuttleSeatId = '';
  let opts = {
    auth_id: 'shuttleSchool',
    getApi: getAllShuttleSchool,
    addApi:addShuttleSchool,
    delApi:delShuttleSchool,
    editApi: editShuttleSchool,
    idKey: ['shuttle_id','school_id', 'row_id', 'shuttle_name'],
    defQuery: '',
    cols: [
      {prop: 'shuttle_name',label: '班车名称' },
      {prop: 'school_name',label: '站点(讫地)名称',type: 'reference' },
    ],
    confirmCallback: () => publicAllData(shuttleSeatId),
    deleteCallback: () => publicAllData(shuttleSeatId)
  };
  let {option,tableLoading,tableData,query,page,dialogShow,dialogData,dialogOption,defDialogData,dialogRef,isDelete,
    dialogConfirm,
    getDataList,} = usePageList(opts);


  watch(() => props.shuttleData, (newVal) => {
    if (newVal){
      let {shuttle_id,shuttle_name,shuttle_seat_id} = newVal;
      query.shuttle_id = shuttle_id;
      defDialogData.shuttle_id = shuttle_id;
      defDialogData.shuttle_name = shuttle_name;
      getDataList();
      shuttleSeatId = shuttle_seat_id || shuttle_id
    }
  },{immediate: true});

  // option.colBtns.splice(0,1);
  // option.hRBtns.push({title: '清空',id: 'build',type: 'primary',event: clearAll});
  dialogOption.fieldList =  [
    /*{field_id: 'shuttle_id',label: '班车编号',type: 'text',col: 3 ,required: true,disabled: true },
    {field_id: 'shuttle_name',label: '班车名称',type: 'text',col: 3 ,required: true,disabled: true },*/
    {field_id: 'sort',label: '序号',type: 'text',col: 3 , },
    {...refOpt.school_id,col:3,required: true,},
    {...refOpt.school_name,col:3,required: true,},
    {field_id: 'is_used',label: '使用标识',type: 'bool',col: 3 , },

    {field_id: 'shuttle_id',label: '',type: 'bool',col: 3 , hiddenShow: true },
    {field_id: 'shuttle_name',label: '',type: 'bool',col: 3 , hiddenShow: true }
  ]

  prepare();
  //删除所有站点
  function clearAll(){
    if (!isDelete.value){
      ElMessage({
        type: 'warning',
        message: '抱歉，您没有权限删除该模块数据'
      })
      return
    }
    ElMessageBox.confirm('确定删除该班次所有站点(讫地)？', '清空', {
      'cancelButtonText': '取消',
      'confirmButtonText': '确定',
      callback: (action) => {
        if (action === 'confirm'){

          delShuttleSchoolBySid(query.shuttle_id).then(res => {
            if (res.errcode !== 0)return;
            ElMessage({
              type: 'success',
              message: `删除成功`,
            });
            getDataList();
            publicAllData(shuttleSeatId);
          })
        }
      },
    })
  }
  function prepare(){
    isDelete.value && option.hRBtns.push({title: '清空',id: 'build',type: 'primary',event: clearAll});
  }

</script>
<style scoped lang="less">
    .wrap{
        height: 100%;
        display: flex;
        flex-direction: column;
        .tips{
            padding-right: 16px;
        }
        ::v-deep{
            .layout-header{
                padding: 0;
            }
            .layout-main{
                padding: 4px 0 0;
            }
        }
    }

</style>
